<div id="dropdown-menu-account-mobile" class="main-bar__links-mobile__account" aria-hidden="true">
  <div class="main-bar">
    <div class="main-bar__logo">
      <div class="main-bar__logo-desktop">
        <%= render partial: "layouts/decidim/logo", locals: { organization: current_organization } %>
      </div>
      <div class="main-bar__logo-mobile">
        <%= render partial: "layouts/decidim/logo_mobile", locals: { organization: current_organization } %>
      </div>
    </div>

    <div>
      <div class="main-bar__links-mobile__trigger" tabindex="0" onclick="document.querySelector('#dropdown-trigger-links-mobile').click();document.querySelector('#dropdown-menu-account-mobile').removeAttribute('aria-modal')">
        <%= icon "close-line" %>
        <p class="sr-only"><%= t("close", scope: "decidim.shared.flag_modal") %></p>
      </div>
    </div>
  </div>

  <div class="account-container p-4 container">
    <% if current_user.avatar.attached? %>
      <div class="main-bar__avatar">
        <%= image_tag(
                current_user.attached_uploader(:avatar).variant_url(:thumb),
                alt: t("decidim.author.avatar", name: decidim_sanitize(current_user.avatar.name))
              ) %>
      </div>
    <% else %>
      <div class="main-bar__avatar-name">
        <%= text_initials(current_user.name) %>
      </div>
    <% end %>

    <p class="h3 mt-2"><%= t("decidim.block_user_mailer.notify.hello") %>&nbsp;<%= current_user.name %></p>

    <ul>
      <%= render partial: "layouts/decidim/header/main_links_dropdown" %>
    </ul>
  </div>
</div>
<script type="text/javascript">
  const closeDiv = document.querySelector('div.main-bar__links-mobile__trigger');
  const menuDropdown = document.querySelector('#dropdown-menu-account-mobile');
  const dropdownTrigger = document.querySelector('#dropdown-trigger-links-mobile');
  // 32 is code for space bar and 13 is code for enter
  closeDiv.addEventListener('keydown', function(e){
    if (e.keyCode === 13 || e.keyCode === 32) {
      menuDropdown.removeAttribute('aria-modal');
      menuDropdown.setAttribute('aria-hidden', "true");
      dropdownTrigger.focus();
    }
  })
</script>
